<template>
	<view class="details">
		<view class="top-bg">
			<view class="navbar">
				<view class="status_bar"></view>
				<view class="acea-row row-between-wrapper navbarH">
					<view class="back-white" @click.stop="back">
						<image class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/back-white.png" mode="aspectFit"></image>
					</view>
					<view class="fs-36 colorfff bold">详情页</view>
					<view class="back-white"></view>
				</view>
			</view>
			
			<view class="">
				<view class="status_bar"></view>
				<view style="height: 100rpx;"></view>
			</view>
			
			<view class="address-nav bg-white">
				<view class="acea-row row-between-wrapper" >
					<view class="fs-32 bold">上门地址</view>
					<view class="" @click="openMap" v-if="type==2">
						<image class="daohang-icon" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/daohang-icon.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="acea-row row-middle fs-32 mt30">
					<view class="">{{ info.real_name }}</view>
					<view class="ml20">{{ info.user_phone }}</view>
				</view>
				<view class="acea-row row-middle mt30">
					<text class="iconfont icon-dizhi"></text>
					<text class="fs-24">上门地址：{{ info.user_address }}</text>
				</view>
			</view>
			<view class="info-nav">
				<view class="bold fs-32 mb30">订单详情</view>
				<block v-for="(item,index) in info.goods_list" :key="index">
					<view class="acea-row row-between-wrapper mt20">
						<view class="color333 fs-24"> {{ item.name }}
							<text class="color666 ml20">{{ item.subtitle }}</text>  
						</view>
						<view class="fs-24 color666">{{ item.price }}元kg</view>
					</view>
				</block>
				
				<view class="acea-row row-between-wrapper mt50">
					<view class="fs-24 color333">订单偏号</view>
					<view class="color666 fs-26">{{ info.order_id }}</view>
				</view>
				<view class="acea-row row-between-wrapper mt20">
					<view class="fs-24 color333">下单时间</view>
					<view class="color666 fs-26">{{ info.add_time }}</view>
				</view>
				<view class="acea-row row-between-wrapper mt20">
					<view class="fs-24 color333">上门时间</view>
					<view class="color666 fs-26">{{ info.yy_time }}</view>
				</view>
				<view class="acea-row row-between-wrapper mt20">
					<view class="fs-24 color333">预估价</view>
					<view class="color666 fs-26">{{ info.yugu_price }}</view>
				</view>
				<view class="bor-bot mt30 mb30"></view>
				<view class="color333 fs-32 bold">备注</view>
				<view class="color666 fs-26 mt30">{{ info.mark || '无' }}</view>
			</view>
			
			<view class="bg-theme btn" @click.stop="jiedan" v-if="type==1">点击接单</view>
			<view class="bg-theme btn" @click.stop="open" v-if="type==2">确认收件</view>
			<view style="height: 100rpx;"></view>
		</view>
		
		<uni-popup type="center" ref="popup">
			<view class="box acea-row row-middle row-around row-column">
				<view class="fs-34 bold color333">确认收件</view>
				<view class="">
					<input v-model="verify_code" class="code" type="text" placeholder="请输入取件码" placeholder-class="fs-26">
				</view>
				<view class="submit bg-theme" @click.stop="goStatus">点击确认</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import{
		orderinfo,
		hexiaoorder,
		receiving
	} from '@/api/news.js'
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		data() {
			return {
				sysHeight : sysHeight,
				id:'',
				type:'',
				info:[],
				verify_code:'',
				
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.type = option.type || '';
			this.getdetail();
		},
		methods:{
			jiedan(){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否接单？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							receiving({ order_id : that.info.order_id }).then(res=>{
								that.$util.Tips({  title : res.msg },()=>{
									uni.navigateBack()
								})
							}).catch(err=>{
								that.$util.Tips({ title : err })
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			getdetail(id){
				let that = this;
				orderinfo(that.id).then(res=>{
					that.info =  res.data;
				})
			},
			openMap(){
				let that = this;
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function (res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							name: '',
							address: that.info.user_address,
							success: function () {
								console.log('success');
							}
						});
					}
				});
			},
			goStatus(){
				if( !this.verify_code ) return this.$util.Tips({  title : '请填写取件码' })
				hexiaoorder({ verify_code : this.verify_code }).then(res=>{
					this.$util.Tips({ title : res.msg },()=>{
						uni.navigateTo({
							url: '/pages/dispatch/status'
						})
					})
				}).catch(err=>{
					this.$util.Tips({ title : err })
				})
			},
			open(){
				this.$refs.popup.open();
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.details{
		
		.top-bg{
			width: 100%;
			height: 676rpx;
			background: linear-gradient(180deg, #0AD08C 0%, #F4FFFB 100%);
			
			.navbar{
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				
				.navbarH{
					width: 100%;
					height: 100rpx;
					padding: 0 30rpx;
					
					.back-white{
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
			
			.address-nav{
				width: 690rpx;
				height: 260rpx;
				border-radius: 24rpx;
				margin: 30rpx auto;
				padding: 30rpx;
				
				.icon-dizhi{
					color: #3D3D3D;
					font-size: 40rpx;
				}
				.daohang-icon{
					width: 200rpx;
					height: 60rpx;
				}
			}
		
			.info-nav{
				width: 690rpx;
				padding: 30rpx;
				background-color: #ffffff;
				border-radius: 24rpx;
				margin: 0 auto;
			}
			
			.btn{
				width: 690rpx;
				line-height: 96rpx;
				border-radius: 24rpx;
				text-align: center;
				color: #ffffff;
				margin: 40rpx auto 0 auto;
			}
			

		
		}

		.box{
			width: 690rpx;
			height: 400rpx;
			border-radius: 24rpx;
			background-color: #ffffff;
			padding: 30rpx;
			
			.code{
				border-radius: 10rpx;
				border: 1rpx solid #333333;
				padding: 0 20rpx;
				width: 500rpx;
				height: 80rpx;
				// line-height: 80rpx;
			}
			.submit{
				width: 500rpx;
				line-height: 90rpx;
				text-align: center;
				color: #ffffff;
				border-radius: 12rpx;
			}
		}
	}
</style>
